<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var basePath ="<%=basePath%>";
</script>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
</style>
</head>

<body>
	<div style="position: relative; left: 100px; top: 100px;">
		<div style="position: relative; width: 140px; height: 210px;" id="card">
			<div>
				<img alt="card" src="<%=basePath%>/static/img/card/front.jpg">
			</div>
			<div id="num_up" style="position: absolute; left: 15px; top: 10px;">
				<p style="font-size: 25px;">J</p>
			</div>
			<div id="suit_up" style="position: absolute; left: 5px; top: 45px;">
				<img alt="card" src="<%=basePath%>/static/img/card/club.jpg"
					style="width: 30px; height: 30px;">
			</div>
			<div id="suit_main" style="position: absolute; left: 50px; top: 85px;">
				<img alt="card" src="<%=basePath%>/static/img/card/club.jpg"
					style="width: 40px; height: 40px;">
			</div>
			<div id="num_down" 
				style="position: absolute; right: 15px; bottom: 10px; -webkit-transform: rotate(180deg);">
				<p style="font-size: 25px;">J</p>
			</div>
			<div id="suit_down" 
				style="position: absolute; right: 5px; bottom: 45px; -webkit-transform: rotate(180deg);">
				<img alt="card" src="<%=basePath%>/static/img/card/club.jpg"
					style="width: 30px; height: 30px;">
			</div>
		</div>
	</div>
</body>
</html>